<template>
	<view class="content">
		<view class="topinfocontent">

			<view class="list">
				<view v-for="(item, index) in phoneRechargeList" :key="index" style="width: 200rpx;height:100rpx">
					<packing-box :active="checkid===(item.id)" @packingBoxClick="packingBoxClick " :data="item">
					</packing-box>
				</view>
			</view>

			<view class="flexrow momeyinfo">
				<view class="text-df">支付金额:</view>
				<text class="big-yellow-text margin-right-sm margin-left-sm">¥</text>
				<text class="big-yellow-text">{{checkItem.price}}</text>
				<text class="big-yellow-text" style="margin-top: -2px;">元</text>
			</view>

		</view>
		<view class="info-des-tip">
			<view class="info-des-tip-text">充值说明:</view>
			<view class="info-des-tip-text">1.该费用仅用于购买平台电话或短信报警提醒次数.</view>
			<view class="info-des-tip-text">2.费用充值会存在延迟,请耐心等到</view>
		</view>

		<view class="button-container">
			<button type="primary" :disabled="btndisable" :loading="btnLoading" class="button"
				@click="pay">支付宝支付</button>

		</view>
	</view>
</template>

<script>
	import {
		paycommit,
		orderPackageList
	} from "@/api/mine/index"
	export default {
		onLoad(query) {

      this.getData(query)
		},
		data() {

			return {
		
				phoneRechargeList: [],
				checkid: null,
				checkItem: {},
				btnLoading: false
			}
		},
		computed: {
			btndisable() {
				return !this.checkid
			}
		},
		methods: {
      getData(query){
          const {type} = query || {}
          if (type == 'sms') {
          	uni.setNavigationBarTitle({
          		title: '短信充值'
          	})
          }
          if (type == 'voice') {
          	uni.setNavigationBarTitle({
          		title: '语音充值'
          	})
          }
          orderPackageList({
          	packageType: type
          }).then(res => {
          	this.phoneRechargeList = res.data
          })
      },
			packingBoxClick(data) {
				this.checkItem = data || {}
				this.checkid = data.id
			},
			pay() {
				this.btnLoading = true
				paycommit({
					packageId: this.checkid,
					platform: '2'
				}).then(res => {
          uni.requestPayment({
            "provider": "alipay",
						'orderInfo': res.data.body,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
              this.btnLoading = false
              uni.$emit('refresh-tariff-manage')
              uni.showLoading({
                title: '等待1秒后回到上页面'
              })
              setTimeout(()=>{
                uni.hideLoading()
                uni.navigateBack({
                  delta: 1
                })
              },1000)
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
              this.btnLoading = false
              uni.showToast({
                title: '支付失败',
                icon:'error'
              })
						}
					});
				})
			}
		}
	}
</script>

<style scoped>
	page {
		height: 100%;
		padding-bottom: calc(var(--window-bottom) + 20px);

	}

	.content {
		display: flex;
		height: 100%;
		flex-direction: column;
	}

	.topinfocontent {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		margin-top: 20rpx;
		margin-bottom: 20rpx;

	}

	.list {
		width: 100%;
		margin-top: 50rpx;
		margin-bottom: 50rpx;
		gap: 28rpx;
		grid-template-columns: repeat(3, auto);
		justify-content: center;
		display: grid;
	}

	.momeyinfo {
		align-self: flex-end;
		margin-right: 50rpx;
		margin-bottom: 50rpx;
	}

	.big-yellow-text {
		text-align: center;
		font-size: 18px;
		color: #ffb300
	}

	.info-des-tip {
		display: flex;
		flex-direction: column;
		margin: 20rpx;

	}

	.info-des-tip-text {
		font-size: 12px;
		color: #898989;
		margin-top: 10rpx;

	}

	.button-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20rpx;
		margin-bottom: 40rpx;
		height: 40px;
		background-color: #f5f5f5;
	}

	.button {
		flex: 1;
		margin-right: 20px;
		margin-left: 20px;
		margin-bottom: 20px;
		height: 100%;
		text-align: center;
		line-height: 40px;
		font-size: 16px;
		border-radius: 5px;

		color: #fff;


	}
</style>